<template>
  <el-dialog
    class="dialog_wrap_w"
    :visible.sync="dialogVisible"
    width="90%"
    title="指定考试人员"
    append-to-body
    @close="close"
  >
    <div class="c-width c-flex c-dis-flex-row dialog_content">
      <div class="dialog_tree">
        <el-tabs type="border-card">
          <el-tab-pane label="部门">
            <el-tree
              class="tree-border"
              :data="deptOptions"
              show-checkbox
              default-expand-all
              ref="dept"
              node-key="id"
              :check-strictly=false
              empty-text="加载中，请稍候"
              :props="defaultProps"
              @node-click="handleNodeClick"
              @check="handleNodeClick"
            ></el-tree>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="c-flex c-hidden c-dis-flex-col dialog_table">
        <div class="c-width">
          <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="mini">
            <el-form-item label="姓名">
              <el-input v-model="queryParams.nickName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button type="info" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="c-width c-flex c-dis-flex-col c-hidden">
          <el-table
            ref="multipleTable"
            :data="tableData"
            style="width: 100%"
            height="100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column type="index" label="序号" width="80">
              <template slot-scope="scope">
                {{ (page.pageNum - 1) * page.pageSize + (scope.$index + 1) }}
              </template>
            </el-table-column>
            <el-table-column prop="nickName" label="姓名"></el-table-column>
          </el-table>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <div class="dialog_tree dialog_tree_r" style="width: 40%">
        <el-tabs type="border-card">
          <el-tab-pane label="指定考试人员">
            <div class="person_select" v-if="selectedPersons.length !== 0">
              <div
                class="items"
                v-for="(item, i) in selectedPersons"
                :key="i"
                @click="closeSelect(i)"
              >
                <p>{{ item.nickName }}</p>
                <span>X</span>
              </div>
            </div>
            <div class="c-flex c-dis-flex-col c-hidden d_no_data" v-else>暂无数据</div>
          </el-tab-pane>

        </el-tabs>
      </div>
    </div>
    <span slot="footer" class="fill_dialog_footer">
       <el-button @click="submit" type="primary" >确定</el-button>
       <el-button @click="close" class="btn_cancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { findSysUserByDeptId,deptTreeSelect,findExamUsers} from '@/api/exam/examManage'
import { listUser } from "@/api/system/user";
export default {
  name: "personSelect",
  components: {},
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      formInline:{},
      dialogVisible: false,
      // 部门列表
      deptOptions: [],
      deptCheckStrictly: true,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [ ],
      multipleSelection: [],
      selectedPersons: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: undefined,
      },
    };
  },
  computed: {},
  mounted() {},
  created() {
  },
  methods: {
    show(id){
      this.deptOptions=[];
      this.getDeptTree(3)
      this.multipleSelection=[];
      this.tableData=[];
      this.dialogVisible=true;
      if(id!=null && id!=undefined){
        // 查询考试参与人员
        findExamUsers({examManageId:id}).then(res => {
          this.selectedPersons= res.data
        })
      }
    },
    close(){
      this.dialogVisible=false;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.tableData  = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams= {
        pageNum: 1,
          pageSize: 10,
          nickName: undefined,
      }
      this.tableData  =[];
    },
    submit(){
      this.dialogVisible=false;
      this.$emit('onselected', this.selectedPersons);
    },
    /** 根据角色ID查询部门树结构 */
    getDeptTree(roleId) {
      return deptTreeSelect(roleId).then(response => {
        this.deptOptions = response.depts
        return response
      })
    },

    // 节点单击事件
    handleNodeClick(data) {
      let that = this
      this.$refs.dept.setChecked(data, true, false)
      const checkedNodes = this.$refs.dept.getCheckedNodes(true, false)
      if (checkedNodes.length > 0) {
        let checkedIds = checkedNodes.map((item => {
          return item.id
        }))
        console.log('checkedIds:', checkedIds)
        findSysUserByDeptId(checkedIds.join(',')).then(res => {
          that.tableData = res.data
        })
      }
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

      this.multipleSelection.forEach((item=>{
       let existsObj = this.selectedPersons.filter((obj=>{
          return obj.userId == item.userId;
        }))

        if(existsObj.length==0){
          this.selectedPersons.push(item);
        }
      }))


    },
    closeSelect(index) {
      const removedItem = this.selectedPersons.splice(index, 1)[0];
      const table = this.$refs.multipleTable;
      if (table) {
        const deselectedRows = this.tableData.filter(
          (row) => row === removedItem
        );
        table.toggleRowSelection(deselectedRows[0], false);
      }
    },
  },
};
</script>
<style lang="scss">
.dialog_wrap_w {
  .el-dialog {
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .el-dialog__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .dialog_content {
        flex: 1;
        overflow: hidden;
        .dialog_tree {
          width: 320px;
          margin-right: 10px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          &.dialog_tree_r {
            margin-right: 0px;
            margin-left: 10px;
          }
          .el-tabs {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .el-tabs__content {
              flex: 1;
              overflow: auto;
              display: flex;
              flex-direction: column;
              .el-tab-pane{
                flex: 1;
                display: flex;
              flex-direction: column;
              }
            }
          }
        }
      }
    }
  }
  .person_select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .items {
      display: flex;
      align-items: center;
      background-color: #f0ecec;
      border-radius: 12px;
      padding: 2px 10px;
      cursor: pointer;
      margin: 2px 4px;
      span {
        margin: 0 4px;
      }
    }
  }
  .d_no_data{
    align-items: center;
    justify-content: center;
  }
}
</style>
